<template>
  <div style="width: 100%">
    <codemirror
        v-model="codes"
        placeholder="Code goes here..."
        :style="{ height: height + 'px' }"
        :autofocus="true"
        :indent-with-tab="true"
        :tab-size="2"
        :extensions="extensions"
        @ready="handleReady"
        @change="change($event)"
        @focus="log('focus', $event)"
        @blur="log('blur', $event)"
    />
  </div>
</template>

<script setup>
import {ref, shallowRef, watch} from 'vue'
import {Codemirror} from 'vue-codemirror'
import {javascript} from '@codemirror/lang-javascript'

const props = defineProps({
  modelValue: {
    type: String
  },
  height: {
    type: Number,
    default: 400
  }
})
const codes = ref('')
watch(
    () => props.modelValue,
    val => {
      codes.value = val || ''
    },
    {
      immediate: true
      // deep: true
    }
)
const extensions = [javascript()]
const log = console.log

// Codemirror EditorView instance ref
const view = shallowRef()
const handleReady = payload => {
  view.value = payload.view
}
const emit = defineEmits(['update:modelValue'])
const change = event => {
  emit('update:modelValue', event)
}
</script>
